<%- include("../shared/header.ejs") %>

<!-- <template>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
</template> -->

<section class="row">
    <div class="col-md-6 intro">
        <h2 class="heading">How to use it</h2>
        <p>
            fakeStoreApi can be used with any type of shopping project that needs products, carts, and users in JSON
            format. you can use examples below to check how fakeStoreApi works and feel free to enjoy it in your awesome
            projects!
        </p>
    </div>
</section>

<section class="row">

    <aside class="col-md-2 hidden-xs">
        <%- include("../shared/aside.ejs") %>
    </aside>


    <div class="col-md-12 code-area">
        <%- include("../shared/productDocs.ejs") %>

        <%- include("../shared/cartDocs.ejs") %>

        <%- include("../shared/userDocs.ejs") %>

        <%- include("../shared/authDocs.ejs") %>
    </div>

</section>









<!-- <script>
    let temp = document.getElementsByTagName('template')[0]
    clon = temp.content.querySelector("svg")

    let tips = document.getElementsByClassName("tips")

    for(i=0;i<tips.length;i++){
        tips[i].appendChild(clon)
    }
 </script> -->
<script>
    let show_btns = document.querySelectorAll(".show-output")
    Array.from(show_btns).forEach(element => {
        element.addEventListener("click", function () {
            element.nextElementSibling.classList.toggle("block")
            if (element.nextElementSibling.classList.contains("block")) {
                element.textContent = "Hide output"
            } else {
                element.textContent = "Show output"
            }

        })
    })
</script>
<%- include("../shared/footer.ejs") %>